<style lang="scss" scoped>
  .card-box{
    .card-list{
      padding-bottom: 1.2rem;
      .card-item{
        margin-bottom: .4rem;
        .card-type{
          padding: .2rem;
        }
        .list{
          padding: 0 .2rem;
          .item{
            border-radius: 4px;
            margin-top: .2rem;
            overflow: hidden;
            &.bank{
              .number{
                background-color: #179afe;
              }
            }
            .number{
              height: 1.4rem;
              background-color: #D7672D;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: .4rem;
              color: #fff;
              font-family: Arial;
            }
            .sub{
              display: flex;
              justify-content: space-between;
              font-size: .24rem;
              color: #999;
              padding: .1rem .2rem;
              background-color: #fff;
            }
          }
        }
      }
    }
    .card-tips{
      z-index: 99;
      position: fixed;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1rem;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: .24rem;
      color: #666;
      background-color: #f0f0f0;
    }
  }
</style>

<template>
  <div class="container hasNav">
    <van-nav-bar title="账号信息" left-arrow left-text="返回" @click-left="$router.back()" fixed />

    <div class="card-box">
      <div class="card-list">
        <div class="card-item">
          <div class="card-type">银行卡信息</div>
          <div class="add" v-if="!bank.length">
            <van-cell icon="plus" title="添加银行卡" is-link to="/user/cardAdd?type=1" />
          </div>
          <div class="list" v-if="bank.length">
            <div class="item bank" v-for="(item, index) in bank" :key="index" @click="$router.push('/user/cardAdd?type=1')">
              <div class="number">{{item.number}}</div>
              <div class="sub">
                <div class="name">{{item.name}}</div>
                <div class="type">{{item.bankName}}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="card-item">
          <div class="card-type">支付宝信息</div>
          <div class="add" v-if="!zfb.length">
            <van-cell icon="plus" title="添加支付宝账号" is-link to="/user/cardAdd?type=2" />
          </div>
          <div class="list" v-else>
            <div class="item" v-for="(item, index) in zfb" :key="index" @click="$router.push('/user/cardAdd?type=2')">
              <div class="number">{{item.number}}</div>
              <div class="sub">
                <div class="name">{{item.name}}</div>
                <div class="type">支付宝</div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="card-tips">
        以上账号信息作为费用结算用途，请准确填写。
        <br>
        如有疑问请致电：400-6788-511</div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'

  import {
    getBankAndAlipayInfo
  } from "../../api/user";

  export default {
    name: 'Card',
    data() {
      return {
        bank: [

        ],
        zfb: [

        ]
      };
    },
    mounted() {
      this.getBankAndAlipayInfo();
    },
    computed: {
      ...mapGetters(['userInfo']),
    },
    methods: {
      async getBankAndAlipayInfo() {
        const data = await getBankAndAlipayInfo();
        let userInfo = JSON.parse(JSON.stringify(this.userInfo))
        userInfo.alipayCardNumber = data.alipayCardNumber
        userInfo.alipayName = data.alipayName
        userInfo.bankCardNumber = data.bankCardNumber
        userInfo.bankName = data.bankName
        userInfo.bankAddress = data.bankAddress
        userInfo.payeeName = data.payeeName
        this.$store.commit('setUserInfo', userInfo);
        if(data.alipayCardNumber) {
          this.zfb = [
            {
              name: data.alipayName,
              number: '*******' + data.alipayCardNumber.slice(-4)
            }
          ]
        }
        if(data.bankCardNumber) {
          this.bank = [
            {
              name: data.payeeName,
              bankName: data.bankName,
              number: '**** **** **** ' + data.bankCardNumber.slice(-4)
            }
          ]
        }
      }
    }
  };
</script>
